<template>
  {{count}}
  <button @click="onAddCount">click</button>

  <h1>{{helloText}}</h1>
</template>

<script>

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(Math.floor(Math.random() * 4))
    }, 2000)
  })
}

import { onMounted, ref, computed, watch } from 'vue'

export default {
  props: ['msg'],
  setup(props) {
    let count = ref(0)
    const getCount = async () => {
      count.value = await getData()
    }
    const onAddCount = () => {
      count.value++
    }
    onMounted(getCount)

    let name = ref('jirengu')
    let helloText = computed(() => {
      return props.msg + ' ' + name.value
    })
    watch(count, (value, oldValue)=>{
      let result = ''
      for(let i=0; i< count.value; i++) {
        result += name.value
      }
      console.log(result)
      name.value = result
    })
    
    return {
      count,
      onAddCount,

      name,
      helloText
    }
  }
}


</script>

<style scoped>
a {
  color: #42b983;
}
</style>
